<template>
    <view>
		
		<!-- 小程序顶部样式 -->
		<cu-custom bgColor="bg-gradual-orange" :isBack="true">
			<block slot="content">首页</block>
		</cu-custom>
		
		<view class="cu-card case">
			<view class="cu-item shadow">
				<view class="cu-form-group">
					<text class="text-lg">
						联系人资料
					</text>
				</view>
				<view class="cu-form-group">
					<text style="font-size: 42upx" class="text-gray cuIcon-mobilefill margin-xs"></text>
					<input  @input="contactInput" placeholder="请输入联系人" name="input" :value="contact"></input>
				</view>
				<view class="cu-form-group">
					<text style="font-size: 42upx" class="text-gray cuIcon-profilefill margin-xs"></text>
					<input  @input="mobileInput" placeholder="请输入联系人手机号" name="input" :value="mobile"></input>
				</view>
			</view>
		</view>
		
		<view class="cu-card case">
			<view class="cu-item shadow">
				<view class="cu-form-group">
					<text class="text-lg">
						订单备注
					</text>
				</view>
				<view class="cu-form-group">
					<textarea maxlength="140" @input="textAreaInput" placeholder="如详细地址或所需配件等"></textarea>
				</view>
			</view>
		</view>
		
		
		<!-- 确认订单按钮 -->
		<view style="position: fixed; bottom: 0upx;width: 100%">
			<view class="uni-flex uni-column" style="justify-content: center;align-items: center;height: 80upx;background-color: white;">
				<view style="font-size: 40upx;">
					¥{{ amount }}
				</view>
			</view>
			<button style="background-color: #ff7c00;" open-type="switchTab" type="primary" class="primary" @tap="saveOrder">现在下单</button>
		</view>
		
		
		
    </view>
</template>

<script>
	
	import uniIcon from '../../components/uni-icon/uni-icon.vue'
	import {
        mapState,
		mapMutations
    } from 'vuex'
	import util from '../../common/util.js'
	
    export default {
        components: {
			uniIcon
        },
        data() {
            return {
				remark: "",
                positionTop: 0,
				userInfo: {},
				mobile: '1111',
				contact: ''
            }
        },
		computed:{
			...mapState(['order']),
			amount: function(){
				// 页面底部显示价格：服务类别费用 + 跑腿费
				return Number(this.order.serviceFee) + Number(util.getDicByKey('tip'))
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync("userInfo");	
			this.contact = this.userInfo.nickName
			this.mobile = this.userInfo.mobile
		},
        methods: {
			contactInput(e){
				this.contact = e.detail.value
			},
			mobileInput(e){
				this.mobile = e.detail.value
			},
			textAreaInput(e){
				this.remark = e.detail.value
			},
            saveOrder(){
				
				if(this.mobile && this.mobile.length != 11){
					uni.showToast({
						title: '请输入正确手机号！',
						duration: 2000,
						icon: "none"
					});
					return ;
				}
				
				// serviceId一定会存在，fee也会存在
				let targetOrder = this.order
				targetOrder.location = this.order.location
				targetOrder.photos = this.order.photos
				targetOrder.remark = this.remark
				targetOrder.totalFee = this.amount
				targetOrder.contact = this.contact
				targetOrder.mobile = this.mobile
				
				
				this.$api.takeOrders(targetOrder).then((res)=>{
					let orderId = res.data.data
					// 微信支付
					
					// 微信支付成功，跳转订单详情页
					console.log('微信支付成功，跳转订单详情页')
					uni.navigateTo({
						url: '../orderDetail/orderDetail?orderId=' + orderId
					})
				}).catch((err)=>{
					console.log('request fail', err);
					uni.showToast({
						title: '下单失败，请联系管理员！',
						duration: 2000,
						icon: "none"
					});
					return ;
				})
			}
        },
    }
</script>

<style>
    .input_class{
		height: 80upx;
		line-height: 80upx;
		width: 100%;
		margin-left: 20upx;
	}
	
	.uni-remark{
		height: 200upx;
		background-color: white;
	}
	.textarea-class{
		margin-top: 20rpx;
		font-size: 30rpx;
	}
</style>
